<template>

    <div>
        <el-form>
            <el-button @click="download" style="float:right">导出PDF</el-button>
            <div id="pdf" style="padding: 40px">
                <h1 style="font-size: 26px;" align="center">{{formData.title}}</h1>
                <el-form-item label="标签" prop="dynamicTags">
                    <el-tag
                            style="margin-left: 10px;"
                            :key="tag"
                            v-for="tag in formData.dynamicTags"
                            :disable-transitions="false">
                        {{tag}}
                    </el-tag>

                </el-form-item>
                <viewer
                        :initialValue="editorText"
                        height="500px"
                        :options="editorOptions"
                />
            </div>

        </el-form>

    </div>

</template>

<script>
    // tui chart 插件
    import 'tui-chart/dist/tui-chart.css';
    import chart from '@toast-ui/editor-plugin-chart';

    // tui 颜色插件
    import colorSyntax from '@toast-ui/editor-plugin-color-syntax';
    import 'tui-color-picker/dist/tui-color-picker.css'

    // 合并单元格
    import tableMergedCell from '@toast-ui/editor-plugin-table-merged-cell';

    // uml 插件
    import uml from '@toast-ui/editor-plugin-uml';

    // 国际化
    import '@toast-ui/editor/dist/i18n/zh-cn';

    // tui editor
    import "codemirror/lib/codemirror.css";
    import "@toast-ui/editor/dist/toastui-editor.css";
    import '@toast-ui/editor/dist/toastui-editor-viewer.css';
    import {Viewer} from "@toast-ui/vue-editor";

    // 代码高亮插件
    import codeSyntaxHightlight from '@toast-ui/editor-plugin-code-syntax-highlight';
    import hljs from 'highlight.js';
    import 'highlight.js/styles/github.css'

    // 图片上传地址
    const path = process.env.VUE_APP_BASE_API;

    // pdf 导出
    import html2canvas from 'html2canvas';
    import jsPDF from "jspdf";

    export default {
        data() {
            return {
                editorText: this.$store.state.setting.markDown.trim(),
                path: path,
                formData: {
                    title: '',
                    dynamicTags: [],
                    tags: '',
                    status: '',
                    content: '',
                    id: '',
                    create_time: '',
                },
                options: [],
                value: '',
                editorOptions: {
                    hideModeSwitch: false,
                    language: 'zh-CN',
                    usageStatistics: false,
                    plugins: [chart, colorSyntax, tableMergedCell, uml, [codeSyntaxHightlight, {hljs}]],

                }
            };

        },
        components: {
            'viewer': Viewer
        },
        methods: {
            // 导出pdf
            download() {
                let _this = this
                const loading = this.$loading({
                    lock: true,
                    text: '正在导出',
                    spinner: 'el-icon-loading',
                    background: 'rgba(0, 0, 0, 0.7)'
                });
                // 下面的"print"为需要导出内容的id(把想导出的html内容用div包起来，加上id="print"即可)
                html2canvas(document.getElementById("pdf")).then(function (canvas) {
                    // 此时这个canvas即选中的需要转换的html的canvas形式
                    // document.body.appendChild(canvas); // 这句的意思是把canvas内容再加在当前页面内容的后面

                    var url = canvas.toDataURL();

                    var contentWidth = canvas.width;
                    var contentHeight = canvas.height;

                    //一页pdf显示html页面生成的canvas高度;
                    var pageHeight = (contentWidth / 592.28) * 841.89;

                    //未生成pdf的html页面高度
                    var leftHeight = contentHeight;

                    //页面偏移
                    var position = 0;

                    //a4纸的尺寸[595.28,595.28]，html页面生成的canvas在pdf中图片的宽高
                    var imgWidth = 595.28;
                    var imgHeight = (592.28 / contentWidth) * contentHeight;

                    var pdf = new jsPDF("", "pt", "a4");

                    if (leftHeight < pageHeight) {
                        pdf.addImage(url, "JPEG", 0, 0, imgWidth, imgHeight);
                    } else {
                        // 分页
                        while (leftHeight > 0) {
                            pdf.addImage(url, "JPEG", 0, position, imgWidth, imgHeight);
                            leftHeight -= pageHeight;
                            position -= 841.89;

                            //避免添加空白页
                            if (leftHeight > 0) {
                                pdf.addPage();
                            }
                        }
                    }

                    pdf.save(_this.formData.title + ".pdf");
                    loading.close();
                });

            }
        },
        computed: {},
        mounted() {

            if (this.$route.params.row != undefined) {
                this.formData.title = this.$route.params.row.title
                this.formData.dynamicTags = this.$route.params.row.tags
                this.formData.id = this.$route.params.row.id
                this.formData.create_time = this.$route.params.row.create_time
                this.formData.status = this.$route.params.row.status
            }

        },
        beforeCreate() {
            if (this.$route.params.row != undefined) {
                this.$store.dispatch('setting/saveMarkdown', this.$route.params.row.content)
            }
        },
        created() {

        },
        watch: {},
        destroyed() {
            window.removeEventListener('beforeunload', e => this.beforeunloadHandler(e))
        }
    };


</script>

<style lang="scss">
    // 事件按钮需要使用类所以不能加scoped
    .fullScreen {
        position: fixed !important;
        z-index: 999;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #fff;
    }

    .tui-editor-defaultUI {
        border: none;
    }

    .el-tag + .el-tag {
        margin-left: 10px;
    }

    .button-new-tag {
        margin-left: 10px;
        height: 32px;
        line-height: 30px;
        padding-top: 0;
        padding-bottom: 0;
    }

    .input-new-tag {
        width: 90px;
        margin-left: 10px;
        vertical-align: bottom;
    }
</style>
